<template>
	<xh-list-container
		ref="pageList"
		title="角色管理"
		:request="request"
		@clickAdd="handleClickAdd"
		:columns="columns"
		rowKey="roleId"
	>
		<template v-slot="scope">
			<xh-list-item
				v-for="(item, index) in scope.data"
				:item-data="item"
				:index="index"
				:key="item.roleId"
				:columns="columns"
				@click="handleClickDetail(item)"
				@clickBtns="handleClickBtns"
				:buttons="[
					{
						text: '编辑',
						key: 'edit',
						color: 'primary',
					},
					{
						text: '删除',
						key: 'delete',
						color: 'error',
					},
				]"
			/>
		</template>
	</xh-list-container>
</template>

<script>
import { deleteRole, getRoleList } from '@/api/system/user';
import { mapGetters } from 'vuex';
// 导入组件
export default {
	name: 'roleManage',
	data() {
		return {
			request: getRoleList,
			columns: [
				{ label: '角色编号', key: 'roleId', isList: true },
				{
					label: '状态',
					key: 'status',
					valueMapList: [],
					isList: true,
					isDetailFormat: true,
				},
				{ label: '角色名称', key: 'roleName', isList: true },
				{ label: '权限字段', key: 'roleKey', isList: true },
				{ label: '创建时间', key: 'createTime', width: '100%', isList: true },
				{ label: '备注', key: 'remark', search: false },
			],
		};
	},
	onShow() {
		this.$refs.pageList?._query();
	},
	computed: {
		...mapGetters(['statusOptions']),
	},
	created() {
		this.columns[1].valueMapList = this.statusOptions;
	},
	methods: {
		handleClickAdd() {
			this.$nav.navigateTo('/subSysManage/roleManage/addEditForm');
		},
		handleClickBtns(btnKey, item, index) {
			if (btnKey === 'delete') {
				this.handleDeleteItem(item, index);
			} else if (btnKey === 'edit') {
				this.$nav.navigateTo('/subSysManage/roleManage/addEditForm', item);
			}
		},
		handleDeleteItem(item) {
			const id = item.roleId;
			this.$modal.confirm('确定删除吗？').then(() => {
				deleteRole(id).then(() => {
					this.$modal.msgSuccess('删除成功！');
					this.$refs.pageList?._query();
				});
			});
		},
		handleClickDetail(item) {
			this.$nav.navigateTo('/pages/detail/index', {
				...item,
				detailColumns: JSON.stringify(this.columns),
			});
		},
	},
};
</script>

<style scoped lang="scss"></style>
